<template>
  <Overlay :show="showPopup" :lock-scroll="false">
    <div class="fav-popup">
      <div class="header">
        <div class="cancel" @click="showPopup = false">取消</div>
        <div class="title">重点关注</div>
        <div class="confirm" @click="showPopup = false">完成</div>
      </div>
      <div class="content">
        <van-pull-refresh v-model="refreshing" @refresh="refresh">
          <van-list v-model:loading="loading" :finished="finished" @load="loadData">
            <div class="fav-item" v-for="item in favList" :key="item.id">
              <div class="item-content">
                <div class="title ellipsis">
                  {{ item.gridName }}
                </div>
                <div class="sub-content">
                  <div class="vid-type shrink-0">{{ item.videoType }}</div>
                  <div class="camera-name ellipsis">{{ item.videoName }}</div>
                </div>
              </div>
              <CancelFavBtn @delete="handleItemDelete(item)" />
            </div>
          </van-list>
          <van-empty v-if="!favList.length && !loading" description="没有关注" />
        </van-pull-refresh>
      </div>
    </div>
  </Overlay>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { Overlay } from 'vant'
import { useVModel } from '@vueuse/core'
import { showToast } from 'vant'
import usePage from '@/hooks/usePage.ts'
import VidServe from '@/api/vid.ts'
import CancelFavBtn from './cancelFavBtn.vue'

const props = defineProps<{
  visible: boolean
  favList: TypeVidItem[]
}>()

const {
  list: favList,
  loading,
  finished,
  reset,
  query,
  refreshing,
  refresh
} = usePage(VidServe.favlist)

// const loadData = () => {
//   return query()
// }

const emit = defineEmits(['update:visible'])

const showPopup = useVModel(props, 'visible', emit)

watch(
  () => props.visible,
  () => {
    refresh()
  }
)
const handleItemDelete = item => {
  console.log('handleItemDelete', item)
  VidServe.cancelFav([item.videoRelId]).then(() => {
    showToast('取消关注成功')
    reset()
    refresh()
  })
}
</script>

<style lang="less" scoped>
.fav-popup {
  position: absolute;
  width: 100vw;
  bottom: 0px;
  border-radius: 10px 10px 0px 0px;
  background: #f4f8fb;
  .header {
    height: 54.5px;
    padding: 0px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;

    .cancel {
      font-weight: medium;
      color: #666666;
    }
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .confirm {
      font-weight: bold;
      color: #3a75c5;
    }
  }

  .content {
    padding: 0px 10px;
    overflow-y: scroll;
    height: 60vh;
    .fav-item {
      background: #fff;
      height: 69px;
      display: flex;
      margin-bottom: 10px;
      border-radius: 8px;
    }

    .item-content {
      padding-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-grow: 1;
      .title {
        color: #0e0d16;
        font-weight: bold;
        font-size: 16px;
      }

      .sub-content {
        margin-top: 12px;
        display: flex;
        .vid-type {
          color: #3a75c5;
          font-weight: medium;
          font-size: 13px;
          padding-right: 6px;
          margin-right: 6px;
          border-right: 0.5px solid #d9d9d9;
        }

        .camera-name {
          color: #0000007f;
          font-weight: medium;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
